<template>
  <div class="container">
    <div class="header-box">
        <h3><span>知识图谱</span></h3>
        <el-row :gutter="10">
          <el-col :span="20">
            <div ref="myCharts"  class="echarts-box"></div>
          </el-col>
          <el-col :span="4">
            <div class="box">
                <p>条件过滤<el-button type="primary" size="mini">聚类</el-button></p>
                <el-select v-model="formInline.user" placeholder="实体名称"  size="mini">
                  <el-option label="实体名称" value="1"></el-option>
                  <el-option label="基准名称" value="2"></el-option>
                </el-select>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="1">基准名称</el-checkbox>
                  <el-checkbox label="2">品种</el-checkbox>
                  <el-checkbox label="3">规格</el-checkbox>
                  <el-checkbox label="4">品牌</el-checkbox>
                </el-checkbox-group>
                <el-select v-model="formInline.region" placeholder="关系类型"  size="mini">
                  <el-option label="关系类型" value="1"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="1">同品种</el-checkbox>
                  <el-checkbox label="2">同分类</el-checkbox>
                  <el-checkbox label="3">同规格</el-checkbox>
                  <el-checkbox label="4">同品牌</el-checkbox>
                  <el-checkbox label="5">同基准名称</el-checkbox>
                </el-checkbox-group>
            </div>
          </el-col>
        </el-row>
    </div>
    <div class="main-box">
        <el-table :data="tableData" border stripe size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
            <el-table-column prop="class" label="多维分类" align="center" width="180"></el-table-column>
            <el-table-column prop="name" label="基准名称" align="center" width="180"></el-table-column>
            <el-table-column prop="variety" label="品种" align="center" ></el-table-column>
            <el-table-column prop="product" label="产品" align="center" ></el-table-column>
            <el-table-column prop="brand" label="品牌" align="center" ></el-table-column>
            <el-table-column prop="code" label="品种码" align="center" ></el-table-column>
            <el-table-column prop="size" label="规格" align="center" ></el-table-column>
            <!-- <el-table-column prop="relation" label="关联关系" align="center" ></el-table-column> -->
        </el-table>
        <el-pagination background
        @size-change=""
        @current-change=""
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="37">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
//import graph from '../../../public/les-miserables.json'
import axios from 'axios'

export default {
  name: 'graph',
  data() {
      return {
        value1:'',
        formInline: {
          user: '1',
          region: '1'
        },
        checkList: ["1","2","3","4","5"],
        tableData: [{
          class:"网络设备",
          name: '计算机',
          variety: '笔记本',
          product:'拯救者',
          brand:"联想",
          code: 'AC2938300',
          size: '9OVA0014C',
          relation: "xxxxx"
        },{
          class:"网络设备",
          name: '计算机',
          variety: '笔记本',
          product:'华为笔记本',
          brand:"华为",
          code: 'AC1335572',
          size: 'MagicbookX15',
          relation: "xxxxx"
        },{
          class:"网络设备",
          name: '计算机',
          variety: 'PC机',
          product:'便携计算机',
          brand:"华为",
          code: 'AC1141108',
          size: 'MateBook 13',
          relation: "xxxxx"
        },{
          class:"网络设备",
          name: '交换机',
          variety: '核心交换机',
          product:'华为交换机',
          brand:"海尔",
          code: 'AE1081692',
          size: 'S5720S',
          relation: "xxxxx"
        },{
          class:"家具用品",
          name: '洗衣机',
          variety: '滚筒洗衣机',
          product:'海尔洗衣机',
          brand:"海尔",
          code: 'EB100B323',
          size: 'EB100B32Mate1',
          relation: "xxxxx"
        }]
      }
   },
   mounted() {
     let myChart = echarts.init(this.$refs.myCharts);
     myChart.showLoading();
     axios.get('/les-miserables2.json').then(response => {
       let graph=response.data
       myChart.hideLoading();
       let option = {
         tooltip: {},
         series: [
           {
             name: '',
             type: 'graph',
             layout: 'none',
             data: graph.nodes,
             links: graph.links,
             categories: graph.categories,
             roam: true,
             label: {
               show: true,
               position: 'right',
               formatter: '{b}'
             },
             labelLayout: {
               hideOverlap: true
             },
             scaleLimit: {
               min: 0.4,
               max: 2
             },
             lineStyle: {
               color: 'source',
               curveness: 0.3
             }
           }
         ]
       };
       myChart.setOption(option);
     });
   }
}
</script>
<style lang="scss">
.el-checkbox__input.is-checked+.el-checkbox__label{
  color:#144a74;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #144a74;
  border-color: #144a74;
}
</style>
<style lang="scss" scoped>
.header-box{
  height: 100%;
}
.echarts-box{
    width: 100%;
    height: 400px;
    // background: url("/graph_bg.jpg") center top no-repeat;
    // background-size: contain;
}
.el-row{
  padding: 10px;
}
  div.box{
      border: 1px solid #EBEEF5;
      position: relative;
      height: 100%;
      p{
          font-size: 14px;
          font-weight: bold;
          line-height: 22px;
          padding:5px;
          padding-left: 10px;
          border-bottom:none ;
          background-color: #EBEEF5;
          margin: 0;
          button{
            float: right;
            padding: 5px 12px;
          }  
      }
      .el-select{
        width: 100%;
      }
      .el-checkbox-group{
        padding: 10px;
        label{
          width: 100%;
        }
      }
  }
</style>
